<script lang="ts" setup>
import { provide } from "vue";
import { buildStyles } from "../utils";

const props = defineProps<{
  justify?: string;
  gutter?: number | number[];
  align?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
}>();

provide("gutter", props.gutter);

const styles = buildStyles(() => {
  const map: any = {
    justifyContent: props.justify,
    alignItems: props.align,
  };
  if (typeof props.gutter === "number") {
    map.marginLeft = -props.gutter / 2 + "px";
    map.marginRight = -props.gutter / 2 + "px";
    map.width = `calc(100% - ${props.gutter})`;
    map.rowGap = props.gutter + "px";
  } else if (Array.isArray(props.gutter)) {
    map.marginLeft = -props.gutter[0] / 2 + "px";
    map.marginRight = -props.gutter[0] / 2 + "px";
    map.marginTop = -props.gutter[1] / 2 + "px";
    map.marginBottom = -props.gutter[1] / 2 + "px";
    map.width = `calc(100% - ${props.gutter[1]})`;
  }
  return map;
});
</script>

<template>
  <div class="umrp-row" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.umrp-row {
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
}
</style>
